<template>
	<div>
		<img class="bdmImg">
	</div>
</template>

<script>
	import { getToken } from '@/unit/auth'
	export default {
		name: 'BDMImage',
		props: {
			authSrc: {
				type: String,
				required: false,
				default: ""
			}
		},
		setup(props, data) {
			let authSrc = props.authSrc
			const token = getToken()
			Object.defineProperty(Image.prototype, 'authsrc', {
				writable: true,
				enumerable: true,
				configurable: true
			})
			let request = new XMLHttpRequest()
			request.responseType = 'blob'
			request.open('get', authSrc, true)
			request.setRequestHeader('Authorization', token)
			request.onreadystatechange = (e) => {
				if (request.readyState == XMLHttpRequest.DONE && request.status == 200) {
					let arr = document.querySelectorAll('.bdmImg')
					for(let i = 0 ; i < arr.length ; i++){
						arr[i].src = URL.createObjectURL(request.response)
						arr[i].onload = () => {
							URL.revokeObjectURL(arr[i])
						}
					}
				}
			}
			request.send(null)
		},
	}
</script>

<style lang="less" scoped>
	div{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		overflow: hidden;
	}
	
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		background-color: #eeeeee;
		border: 0px;
	}
</style>
